<template>
  <div>
    <TabHeader :tabList="panels.map(p => p!.label)" role="snail-tabs" @change="handleChange">
    </TabHeader>
    <!-- <TabContent :selectedIndex="panelSelectedIndex"> -->
    <!-- <TabPanel v-for="(panel, index) in panels" :name="panel!.name" :tabIndex="index"></TabPanel> -->
    <!-- </TabContent> -->
    <!-- <slot v-if='false'></slot> -->
    <div ref="tabBodyRef"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, onMounted, computed, render } from 'vue'
import TabHeader from './TabHeader.vue';
// import TabContent from './TabContent.vue';
// import TabPanel from './TabPanel.vue'

const TabsModel = defineModel()

const tabBodyRef = ref()

const getSlots = getCurrentInstance()?.slots.default
const slots = ref(getSlots ? getSlots() : [])

const panels = computed(() => [
  ...slots.value.map((slot) => { return slot.props }),
])

const currentPanel = computed(()=>{
  return slots.value.find((slot) => slot.props!.name === TabsModel.value)
})

defineProps({
  tabs: {
    type: Array<String>
  }
})
onMounted(() => {
  // if (getSlots) {
  //   console.log(getSlots())
  // }
  if(currentPanel.value){
    render(currentPanel.value, tabBodyRef.value)
  } 
})

const emits = defineEmits<{
  (e:"beforeChange", index: number):void
}>()

const handleChange = (index: number) => {
  TabsModel.value = slots.value[index].props!.name
  emits('beforeChange', index)
  render(slots.value[index], tabBodyRef.value)
}


</script>

<style scoped lang="scss"></style>